<template>
    <Card>
        <JG-search :searchData="searchData" @on-input-search="askDatasearch"  @on-change-change="askData" @click-add="handleEdit(false)" @click-sync="askDataclick" />
        <JG-table
            :params="params"
            :data="data"
            :loading="loading"
            :total="total"
            :butshow="butshow"
            :columns="columns"
            @askData="askData"
            @handleEdit="handleEdit"
            @handleUnbind="handleUnbind"
            @handleActionLog="handleActionLog"></JG-table>
        <modal ref="modal" @askData="askData"/>
    </Card>
</template>
<script>
    import util from "@/libs/util";
    import { rbacmemberallmemberlist, rbacmemberallunbind } from "@/api/staffsetting.js";
    import { rbacmembersyncmember } from "@api/peoplesetting"
    import modal from "./modal";
    export default {
        components: {modal},
        name: '',
        data() {
            return {
                butshow: {
					Edit: {
						name: "-v1-rbac-member-update-personnel",
						flag: "/v1/rbac/member/update-personnel",
					},
					Unbind: {
						name: "-v1-rbac-member-all-unbind",
						flag: "/v1/rbac/member/all-unbind",
					},
					ActionLog: {
						name: "-34",
						flag: "/",
					},
				},
                modal: false,
                loading: false,
                total: 0,
                params: { keyword: '', project_id: '', page: 1, pageSize: 10 },
                searchData: {
                    left: [
                        { id: 1, key: 'Input', value: '', clearable: true, placeholder: '请输入搜索的姓名', callback: 'search' },
                        { id: 2, key: 'Select', value: '', clearable: true, placeholder: '请选择项目',
                            childList: util.storage.get('project'),
                            field: { label: 'name' },
                            callback: 'change'},
                        { id: 3, key: 'Button', value: '新增', callback: 'add', has: {
							name: "-v1-rbac-member-add-personnel",
							flag: "/v1/rbac/member/add-personnel",
						}},
                    ],
                    right: [
                        { id: 1, key: 'Button', value: '同步钉钉', loading: false, callback: 'sync', has: {
							name: "-v1-rbac-member-sync-member",
							flag: "/v1/rbac/member/sync-member",
						}},
                    ]
                },
                columns: [
                    { title: 'ID', key: 'id', width: 100, fixed: 'left' },
                    { title: '用户名', key: 'realname', width: 120, fixed: 'left' },
                    { title: '手机号', key: 'mobile', width: 130 },
                    { title: '已属项目', slot: 'project_name_arr', minWidth: 250 },
                    // { title: '角色', slot: 'role_name_arr', minWidth: 200 },
                    { title: '最后登录时间', key: 'last_time', width: 160 },
                    { title: '最后登录IP', key: 'last_ip', width: 140 },
                    { title: '登录次数', key: 'visit_count', width: 115 },
                    { title: '操作', slot: 'staffsettingAction', width: 130, fixed: 'right' },
                ],
                data: []
            }
        },
        mounted() {
            this.initial()
        },
        methods: {
            initial() {
                this.askData()
            },
            askDatas() {
                this.params.page = 1
                this.askData()
            },
            askData() {
                this.searchData.left.forEach((item) => {
                    if (item.id === 1) {
                        this.params.keyword = item.value
                    } else if (item.id === 2) {
                        this.params.project_id = item.value
                    }
                });
                this.loading = true
                rbacmemberallmemberlist(this.params).then(res=>{
                    this.data = res.list
                    this.total = res.total
                    if (this.params.keyword&&this.total == 0) {
                        this.$Message.error(`未搜索到${this.params.keyword}，可以尝试先同步钉钉，然后在尝试搜索`)
                    }
                    this.loading = false
                }).catch(() => {
                            this.loading = false;
                });
            },
            askDataclick() {
                this.searchData.right[0].loading = true
                rbacmembersyncmember().then(()=>{
                    this.$Message.success("同步成功(5分钟内多次同步无效)")
                    this.askData()
                    this.searchData.right[0].loading = false
                })
            },
            askDatasearch() {
                this.params.page = 1
                this.searchData.left.forEach((item) => {
                    if (item.id === 2) {
                        item.value = '';
                    }
                });
                this.askData()
            },
            handleEdit(row){
                this.$refs.modal.initial(row)
            },
            handleUnbind(row) {
                this.$Modal.confirm({
                    title: '解绑员工',
                    content: `<p>确认解绑该员工吗？</p><p><fong class="red">解绑后将解除该员工所有项目权限！</font></p>`,
                    onOk: () => {
                        rbacmemberallunbind({member_id: row.id}).then(() => {
                            this.$Message.info("解绑成功");
                            this.askData();
                        });
                    },
                });
            },
            handleActionLog(row) {
                this.$router.push({path: '/oplog', query: {id: row.id}})
            }
        },
    }
</script>
